<template>
  <div class="reserves-model-box">
    <el-table class="table" :span-method="objectSpanMethod" :data="reservesData.reservesData" border>
      <el-table-column label="序号" type="index" width="70" align="center" />
      <el-table-column label="类型编码" prop="code" align="center"></el-table-column>
      <el-table-column label="年初保有" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.begin"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="年初累积" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.end"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="开采量" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.opening"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="损失量" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.loss"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="勘查增减（+）" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.discovery"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="重算增减（+）" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.recalculation"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="审批压覆量（+）" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.approval"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="其他（+）" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.other"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="年末保有" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.end"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="累计查明" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.end"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="90">
        <template #default="scope">
          <el-button type="danger" plain @click="delData(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  reservesData: {
    type: Object,
    default: () => []
  }
});

const delData = index => {
  const code = props.reservesData.reservesData[index].code;
  props.reservesData.reservesData[index] = {
    code
  };
};

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 1) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};

//分子分母处理
watch(
  () => props.reservesData.reservesData,
  newValue => {
    const leftArr = [];
    const rightArr = [];
    newValue.forEach((item, index) => {
      if (index % 2 === 0) {
        leftArr.push(item);
      } else {
        rightArr.push(item);
      }
    });
    leftArr.forEach((item, index) => {
      const obj = rightArr[index];
      for (const key in item) {
        if (item[key] && !obj[key]) {
          leftArr[index][key] = '';
        }
      }
    });
  },
  {
    deep: true
  }
);
</script>
